


window.onload =function (){
//需求：文本框插入光标后预备文字内容消失，失去插入条光标并且没有输入内容时显示文字。
//1.获取事件源
var inp1=document.getElementById("inp1");
//2.绑定事件
inp1.onfocus= fn1;
function fn1(){
	//3.书写事件驱动程序
	if(this.value==="小米9"){
	this.value="";
	}
}
inp1.onblur= fn2;
function fn2(){
	//3.书写事件驱动程序
	if(this.value===""){
	this.value="小米9";
	}
}

//需求，图片每隔一秒自动播放
//点击圆点可以跳转到指定位置
//点击左右按钮可以查看上一张和下一张
	var box=document.getElementById("box");
	var inner=box.children[0];
	var ul=document.getElementById("ul");
	var ulLiArr=ul.children;
	var ol=inner.children[1];
	var olLiArr=ol.children;
	var div=inner.children[2];
	var spanArr=div.children;
	var imgWidth=inner.offsetWidth;

	var ulNewLi=ul.children[0].cloneNode(true);
	ul.appendChild(ulNewLi);

	//绑定事件
	for(i=0;i<olLiArr.length;i++){
		olLiArr[i].index=i;
		// imgWidth=inner.offsetWidth;
		olLiArr[i].onmouseover= function (){
			for(j=0;j<olLiArr.length;j++){
				olLiArr[j].className="";
			}
			this.className="current";
			pic=dot=this.index;
			animate(ul,-imgWidth*this.index);

		}
	}

	var timer=setInterval(autoPlay,1000);
	var pic=0;
	var dot=0;
	function autoPlay(){
			pic++;
			if(pic>olLiArr.length){
				ul.style.left=0;
				pic=1;
			}
			animate(ul,-imgWidth*pic)

			dot++;
			if(dot>olLiArr.length-1){
				dot=0;
			}
			for(i=0;i<olLiArr.length;i++){
				olLiArr[i].className="";
			}
			olLiArr[dot].className="current";

	}

	function toLeft(){
			pic--;
			if(pic<0){
				ul.style.left=(-olLiArr.length*imgWidth)+"px";
				pic=olLiArr.length-1;
			}
			animate(ul,-imgWidth*pic)

			dot--;
			if(dot<0){
				dot=olLiArr.length-1;
			}
			for(i=0;i<olLiArr.length;i++){
				olLiArr[i].className="";
			}
			olLiArr[dot].className="current";
	}

	inner.onmouseover= function (){
		clearInterval(timer);
		div.style.display="block";
	}
	inner.onmouseout= function (){
		timer=setInterval(autoPlay,1000);
		div.style.display="none";
	}

	spanArr[0].onclick= function (){
		toLeft();
	}
	spanArr[1].onclick=function (){
		autoPlay();
	}

	function animate(ele,target){
		clearInterval(ele.timer);
		var speed=target>ele.offsetLeft?10:-10;
		ele.timer=setInterval(function(){
			ele.style.left=ele.offsetLeft+speed+"px";
			var val=Math.abs(target-ele.offsetLeft);
			if(val<Math.abs(speed)){
				ele.offsetLeft=target;
				clearInterval(ele.timer);
			}
		},2)
	}
//需求：显示倒计时
		var time=document.getElementById("time");
		var timerId=setInterval(fn,1000);
		var totalTime=3700;
		function fn(){
		totalTime--;
		if(totalTime<0){
			clearInterval(timerId);
			return;
		}
		var hour=Math.floor(totalTime/3000);
		var minute=Math.floor(totalTime%3000/60);
		var second=totalTime%60;
		console.log(second);
		
		// --------------方法二--------------------
		// var date1=new Date();
		// var date2=new Date("2021/05/28 17:44:00");
		// if(date1>=date2){
		// 	clearInterval(timerId);
		// 	return;
		// }
		// var sumMs=date2.getTime()-date1.getTime();
		// var hour=parseInt(sumMs/1000/60/60%24);
		// hour=hour<10?"0"+hour:hour;
		// var minute=parseInt(sumMs/1000/60%60);
		// minute=minute<10?"0"+minute:minute;
		// var second=parseInt(sumMs/1000%60);
		// second=second<10?"0"+second:second;
		// console.log(second);
			time.innerHTML="当前场次"+hour+"小时"+minute+"分"+second+"秒"+"后结束抢购";
		}
}